<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/WEB-INF/views/common/header.jsp" %>
</head>
<body>
<%@include file="/WEB-INF/views/common/top.jsp" %>
<%@include file="/WEB-INF/views/common/nav.jsp" %>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="show-top-grids">
        <div class="main-grids about-main-grids">
            <h4>角色列表</h4>
            <div class="recommended-info">
                <hr class="layui-bg-green">
                <form class="form-inline" class="layui-form layui-form-pane" method="post"
                      action='<c:url value="/role/list"/>'>
                    <div class="row bs-example">
                        <div class="form-group col-md-3">
                            <input type="text" id="roleName" name="roleName" placeholder="输入角色名" autocomplete="off"
                                   value="${response.query.roleName}" class="layui-input">
                        </div>

                        <div class="form-group col-md-3">
                            <button class="layui-btn" id="query" type="submit">查询</button>
                        </div>
                    </div>


                    <div class="about-grids" style="margin-top: 2em;">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th style="width:10%;">ID</th>
                                <th style="width:15%;">角色名</th>
                                <th style="width:20%">修改时间</th>
                                <th style="width:10%">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${response.data}" var="roleInfo" varStatus="status">
                                <tr>
                                    <td>${roleInfo.id}</td>
                                    <td>${roleInfo.roleName}</td>
                                    <td>${roleInfo.updateTimeStr}</td>
                                    <td>
                                        <div class="layui-table-cell laytable-cell-1-9">
                                            <a onclick="edit(${roleInfo.id});" class="layui-btn layui-btn-small">编辑</a>
                                            <a onclick="deleteRole(${roleInfo.id});"
                                               class="layui-btn layui-btn-danger layui-btn-small">删除</a>
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                    <div>
                        <jsp:include page="/WEB-INF/views/common/pagination.jsp"/>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
</body>

<script type="application/javascript">
    layui.use('layer', function () {
        window.layer = layui.layer;
    });

    /*导航栏参数*/
    var $nav_a = $("#ul_nav a[href='/role/list']");
    $nav_a.parent().addClass("active");
    $nav_a.parent().parent().css("display", "block");


    function edit(roleId) {
        window.open('<c:url value="/role/edit"/>?roleId=' + roleId + '');
    }

    /**
     * 删除角色
     * @param id
     */
    function deleteRole(id) {
        window.layer.confirm('确定删除角色？', {btn: ['删除', '取消']}, function () {
            $.ajax({
                url: '<c:url value="/role/delete"/>',
                dataType: 'json',
                type: 'post',
                data: {roleId: id},
                success: function (data) {
                    if (data.code !== "200") {
                        window.layer.msg(data.message, {icon: 5, anim: 6});
                    } else {
                        $("#query").click();
                    }
                }, error: function () {
                }
            });
        }, function () {
        });
    }


</script>


</html>
